<template>
    <div class="m-life">
        <el-row>
            <ul class="nav">
                <li>
                    <router-link to="/" class="takeout">美团外卖</router-link>
                </li>
                <li>
                    <router-link to="/" class="">猫眼电影</router-link>
                </li>
                <li>
                    <router-link to="/" class="">美团酒店</router-link>
                </li>
                <li>
                    <router-link to="/" class="apartment">民宿/ 公寓</router-link>
                </li>
                <li>
                    <router-link to="/" class="business">商家入驻</router-link>
                </li>
                <li>
                    <router-link to="/" class="">美团公益 </router-link>
                </li>
            </ul>
        </el-row>
        <el-row>
            <el-col :span="14">
                <Slider />
            </el-col>
            <el-col :span="4">
                <div class="m-life-pic"></div>
            </el-col>
            <el-col :span="6">
                <div class="m-life-login" v-if="!$store.state.userName">
                    <h4><img src="//s0.meituan.net/bs/fe-web-meituan/e350c4a/img/avatar.jpg" alt=""></h4>

                    <p class="m-life-login-name">Hi! 您好</p>

                    <p>
                        <router-link :to="{ name: 'register' }">
                            <el-button round>注册</el-button>
                        </router-link>
                    </p>
                    <p>
                        <router-link :to="{ name: 'login' }">
                            <el-button round>立即登录</el-button>
                        </router-link>
                    </p>

                </div>

                <div class="m-life-login" v-if="$store.state.userName">
                    <div class="setting">
                        <a href="#"><i class="el-icon-setting"></i></a>
                    </div>

                    <h4>
                        <a href="">
                            <img src="https://p0.meituan.net/pccommon/ab80f64ced46546b99d5194edf86318a7325.png"
                                alt="" />
                        </a>
                    </h4>
                    <p class="m-life-login-name">
                        <router-link :to="{ name: 'index' }">
                            <span>{{ $store.state.userName }}</span>
                            <span>
                                <i class="el-icon-star-on"></i>
                            </span>
                        </router-link>

                    </p>
                    <div class="item">
                        <div class="fn-item">
                            <a href="#">
                                <div class="icon">
                                    <i class="el-icon-s-order"></i>
                                    <p class="fn-name">我的订单</p>
                                </div>
                            </a>
                        </div>
                        <div class="fn-item">
                            <a href="#">
                                <div class="icon">
                                    <i class="el-icon-star-on"></i>
                                    <p class="fn-name">我的收藏</p>
                                </div>
                            </a>
                        </div>
                        <div class="fn-item">
                            <a href="#">
                                <div class="icon">
                                    <i class="el-icon-s-ticket"></i>
                                    <p class="fn-name">抵用卷</p>
                                </div>
                            </a>
                        </div>
                        <div class="fn-item">
                            <a href="#">
                                <div class="icon">
                                    <i class="el-icon-s-finance"></i>
                                    <p class="fn-name">余额</p>
                                </div>
                            </a>
                        </div>

                        <div class="fn-item">
                            <a href="#">
                                <div class="icon">
                                    <i class="el-icon-more"></i>
                                    <p class="fn-name">更多</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="7">
                <div class="m-life-hotel"></div>
            </el-col>
            <el-col :span="7">
                <div class="m-life-music"></div>
            </el-col>
            <el-col :span="4">
                <div class="m-life-coop"></div>
            </el-col>
            <el-col :span="6">
                <div class="m-life-downapp">
                    <img src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png" alt="下载APP">
                    <p>美团app手机版</p>
                    <p class="last-p">
                        <span class="red">
                            1元起
                        </span>
                        吃喝玩乐
                    </p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Slider from './slider.vue'
export default {
  name: 'life',
  components: {
    Slider
  }
}
</script>

<style lang="scss">
@import "@/assets/css/index/life.scss"
</style>
